<template>
  <div class="swipe-wrapper">
    <!--<a class="image" href="#" v-for="v,k of imgList" :key="k" :style="`background-image:url(${v})`"></a>-->
    <template v-for="v,k of imgList" :key="k">
      <transition name="fade">
        <a class="image" v-show="k==active"></a>
      </transition>
    </template>
    <div class="pagination">
      <template v-for="v,k of imgList" :key="k">
        <span :class="{active:k==active}" @click="changeActive(k)"></span>
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
  import {ref} from 'vue';
  /* const imgList = [ */
  /*   "../assets/images/banner/6833a9c3-d1cc-4a38-a12e-e308b14de2f8.jpg", */
  /* ]; */

  const imgList = Array(8).fill(null);

  let active = ref(0);
  function changeActive(num: number) {
    active.value = num;
  }

  setInterval(() => {
    if (active.value < (imgList.length - 1)) {
      active.value++;
    } else {
      active.value = 0;
    }
  }, 7000)
</script>

<style lang="scss">
  .swipe-wrapper {
    @apply h-60vw lg: (h-44vw);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;

    .image {
      height: 100%;
      width: 100%;
      background-image: url("../assets/images/banner/6833a9c3-d1cc-4a38-a12e-e308b14de2f8.jpg");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      display: block;
      position: absolute;
      left: 0;
      top: 0;
    }

    .pagination {
      display: flex;
      margin-bottom: 30px;
      z-index: 1;

      span {
        margin: 0 1vw;
        display: block;
        width: 10px;
        height: 10px;
        background: #fff;
        border-radius: 5px;
        border: 1px solid #999;
      }

      .active {
        background: #999;
      }
    }

  }

  .fade-enter-active,
  .fade-leave-active {
    transition: transform 0.7s ease;
  }

  .fade-enter-from {
    transform: translateX(100vw);
  }
  .fade-leave-to {
    transform: translateX(-100vw);
  }
</style>
